<template>
	<view class="editUser">
		<view class="avatar" @click="upavatar">
			<image :src="userInfo.avatar" mode="scaleToFill"></image>
			<view class="bianji">
				编辑
			</view>
		</view>
		<view class="tis">
			建议上传1:1比例图片
		</view>
		<view class="jiben">
			<view class="title">基本信息</view>
			<view class="form">
				<view class="item">
					<view class="key">昵称</view>
					<input class="inp" placeholder="请输入昵称" border="none" v-model="userInfo.nickname"></input>
				</view>
				<view class="item" @click="show = true">
					<view class="key">性别</view>
					<input class="inp" placeholder="请输入性别" disabled border="none" v-model="gender"></input>
				</view>
				<view class="item">
					<view class="key">年龄</view>
					<input class="inp" type="number" placeholder="请输入年龄" border="none" v-model="userInfo.age"></input>
				</view>
				<view class="item">
					<view class="key">所在地</view>
					<uni-data-picker ref="myPicker" v-model="userInfo.area" popup-title="请选择所在地" :localdata="dataTree"
						@change="onchange" style="border: none;">
					</uni-data-picker>
				</view>
			</view>
		</view>
		<view class="jianjei">
			<view class="title">基本简介</view>
			<view class="content">
				<view class="key">简介</view>
				<textarea class="textarea" placeholder="📸 记录美好生活🌹🌹🌹" v-model="userInfo.desc" auto-height />
			</view>
		</view>
		<view class="jianjei">
			<view class="title">博主空间背景</view>
			<view class="content">
				<view class="key">背景图片</view>
				<view class="img-data">
					<view v-if="userInfo.back_img" class="imgItem">
						<image :src="userInfo.back_img" mode="scaleToFill"></image>
						<view class="sc">
							<u-icon name="close-circle-fill" @click="userInfo.back_img = ''"></u-icon>
						</view>
					</view>
					<view v-if="!userInfo.back_img" class="add" @click="upCover"></view>
				</view>
			</view>
		</view>
		<view class="jiben">
			<view class="title">平台账号</view>
			<view class="form">
				<view class="item">
					<view class="key">抖音号</view>
					<input class="inp" placeholder="请输入抖音号" border="none" v-model="userInfo.dy_account"></input>
				</view>
				<view class="item">
					<view class="key">小红书号</view>
					<input class="inp" placeholder="请输入小红书号" border="none" v-model="userInfo.red_account"></input>
				</view>
			</view>
		</view>
		<view class="btn" @click="editUser">
			保存
		</view>
		<u-picker :show="show" :columns="columns" @close="show = false" @cancel="show = false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import dataTree from "@/utils/address.js"

	export default {
		data() {
			return {
				userInfo: {},
				dataTree: dataTree,
				gender: "",
				show: false,
				columns: [
					['男', '女']
				],
				imgList: []
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 上传背景
			upCover() {
				// #ifdef H5
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// console.log(res);
						// return
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
							filePath: res.tempFiles[0].path,
							name: 'file',
							header: {
								"token": uni.getStorageInfoSync("token")
							},
							success: (res) => {
								res = JSON.parse(res.data);
								if (res.code == 200) {
									this.userInfo.back_img = `${res.result.url}${res.result.path}`
									uni.hideLoading();
								} else {
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '请稍后再试',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifndef H5
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: (res) => {
						// console.log(res);
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							header: {
								"token": uni.getStorageInfoSync("token")
							},
							success: (res) => {
								res = JSON.parse(res.data);
								if (res.code == 200) {
									this.userInfo.back_img = `${res.result.url}${res.result.path}`
									uni.hideLoading();
								} else {
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									title: '请稍后再试',
									icon: 'none'
								})
							}
						});
					},
				})
				// #endif
			},
			//更新个人信息
			async editUser() {
				let data = JSON.parse(JSON.stringify(this.userInfo))
				// console.log(data);
				data.gender = this.gender == "男" ? 1 : this.gender == "女" ? 2 : 0;
				data.area = Number(data.area)
				// data.desc = data.desc ? data.desc : "📸 记录美好生活🌹🌹🌹"
				// return
				let res = await this.$http("api/user/editUser", data, "POST")
				// console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '设置成功',
						icon: 'none',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						})
						// uni.navigateBack()
					}, 2000);
				}
			},
			confirm(e) {
				console.log(e);
				this.gender = e.value[0]
				this.show = false
			},
			async upavatar() {
				console.log(88);
				// #ifdef H5
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// console.log(res);
						// return
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
							filePath: res.tempFiles[0].path,
							name: 'file',
							header: {
								"token": uni.getStorageInfoSync("token")
							},
							success: (res) => {
								res = JSON.parse(res.data);
								if (res.code == 200) {
									this.userInfo.avatar =
										`${res.result.url}${res.result.path}`
									uni.hideLoading();
								} else {
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '请稍后再试',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifndef H5
				// let res = await uni.chooseMedia({
				// 	count: 9,
				// 	mediaType: ['image', 'video'],
				// 	sourceType: ['album', 'camera'],
				// 	maxDuration: 30,
				// 	camera: 'back',
				// })
				// console.log(res);


				// return
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: (res) => {
						// console.log(res);
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							header: {
								"token": uni.getStorageInfoSync("token")
							},
							success: (res) => {
								res = JSON.parse(res.data);
								if (res.code == 200) {
									this.userInfo.avatar =
										`${res.result.url}${res.result.path}`
									uni.hideLoading();
								} else {
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									title: '请稍后再试',
									icon: 'none'
								})
							}
						});
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							title: '请稍后再试',
							icon: 'none'
						})
					}
				})
				// #endif
			},
			onchange(e) {
				// console.log(e);
				if (e.detail.value[0]) {
					this.userInfo.province = e.detail.value[0].text
					this.userInfo.city = e.detail.value[1].text
				} else {
					this.userInfo.province = ""
					this.userInfo.city = ""
				}
			},
			async getUserInfo() {
				let res = await this.$http("api/user/getUserInfo", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.gender = res.result.gender == 1 ? "男" : res.result.gender == 2 ? "女" : ''
					res.result.area = Number(res.result.area)
					this.userInfo = res.result

				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.editUser {
		padding: 64rpx 32rpx;

		// padding: 210rpx 32rpx 64rpx;
		// background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/banner.png") no-repeat;
		// background-size: 100% auto;
		.avatar {
			position: relative;
			text-align: center;

			image {
				width: 200rpx;
				height: 200rpx;
				border: 4rpx solid #fff;
				border-radius: 50%;

			}

			.bianji {
				position: absolute;
				left: 50%;
				bottom: -20rpx;
				transform: translateX(-50%);
				width: 72rpx;
				height: 48rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				line-height: 48rpx;
				text-align: center;
				font-weight: bold;
				font-size: 20rpx;
				color: #333333;
			}
		}

		.tis {
			font-weight: bold;
			font-size: 20rpx;
			color: #8D8F90;
			text-align: center;
			padding: 30rpx 0;
		}

		.jiben {
			padding-top: 68rpx;

			.title {
				font-weight: 800;
				font-size: 32rpx;
				color: #333333;
				padding-bottom: 32rpx;
			}

			.form {
				width: 638rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;

				.item {
					display: flex;
					align-items: center;
					width: 100%;
					height: 128rpx;

					.key {
						text-align: center;
						width: 180rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					.inp {
						flex: 1;
						font-weight: bold;
						font-size: 28rpx;

						.input-placeholder {
							font-weight: bold;
							font-size: 28rpx;
							color: #CACACA;
						}
					}

					::v-deep .uni-data-tree {
						.input-value-border {
							border: none !important;
							padding: 0;

							.arrow-area {
								display: none;
							}

							.placeholder {
								font-weight: bold;
								font-size: 28rpx;
								color: #CACACA;
							}
						}

						.selected-list {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.jianjei {
			padding-top: 48rpx;

			.title {
				font-weight: 800;
				font-size: 32rpx;
				color: #333333;
				padding-bottom: 32rpx;
			}

			.content {
				display: flex;
				// align-items: center;
				width: 638rpx;
				// height: 180rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding: 48rpx 0;

				.key {
					text-align: center;
					width: 180rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.textarea {
					padding: 0 10rpx;
					font-weight: bold;
					font-size: 28rpx;

					.uni-textarea-placeholder {
						font-weight: bold;
						font-size: 28rpx;
						color: #CACACA;
					}
				}

				.img-data {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.imgItem,
					.add {
						position: relative;
						width: 152rpx;
						height: 152rpx;
						margin: 0 24rpx 24rpx 0;

						image {
							width: 100%;
							height: 100%;
						}

						.sc {
							position: absolute;
							top: -16rpx;
							right: -16rpx;
						}
					}

					.add {
						background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/addContent.png") no-repeat;
						background-size: 100% 100%;
						margin-right: 0;
					}

					.imgItem:nth-child(4n) {
						margin-right: 0;
					}
				}
			}
		}

		.btn {
			width: 606rpx;
			height: 96rpx;
			background: #333333;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 52rpx auto;
			line-height: 96rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>